<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>管理员个人中心</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.bundle.min.js"></script>
    <style>
        body { margin: 0; padding: 0; background: #f5f6fa; display: flex; min-height: 100vh; }
        .main-wrapper {
            display: flex;
            width: 100%;
        }
        .sidebar {
            width: 240px;
            background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
            padding: 0;
            box-shadow: 2px 0 8px rgba(0,0,0,0.07);
            min-height: 100vh;
            color: #fff;
            display: flex;
            flex-direction: column;
            align-items: stretch;
        }
        .sidebar h3 {
            color: #fff;
            font-weight: bold;
            text-align: center;
            padding: 32px 0 16px 0;
            letter-spacing: 2px;
            font-size: 1.3rem;
            margin-bottom: 0;
        }
        .sidebar ul {
            list-style: none;
            padding: 0 0 32px 0;
            margin: 0;
            flex: 1;
        }
        .sidebar ul li {
            margin: 0;
        }
        .sidebar ul li a {
            display: flex;
            align-items: center;
            padding: 14px 32px;
            color: #e3e6f0;
            text-decoration: none;
            font-size: 1.08rem;
            border-left: 4px solid transparent;
            transition: background 0.2s, color 0.2s, border-color 0.2s;
            border-radius: 0 24px 24px 0;
            margin-bottom: 2px;
        }
        .sidebar ul li a:hover,
        .sidebar ul li a.active {
            background: rgba(255,255,255,0.12);
            color: #fff;
            border-left: 4px solid #f6c23e;
            font-weight: bold;
        }
        .sidebar ul li a .icon {
            margin-right: 10px;
            font-size: 1.2em;
        }
        .main-content {
            flex-grow: 1; /* Allow main content to take up remaining space */
            padding: 20px;
            background-color: #f5f6fa; /* Light grey background for main content area */
        }
        .info-card {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .form-group label { font-weight: bold; }
        .form-row {
            display: flex;
            flex-wrap: wrap;
            margin-right: -15px;
            margin-left: -15px;
        }
        .form-row > .col, .form-row > [class*="col-"] {
            padding-right: 15px;
            padding-left: 15px;
        }
        .form-group.row {
            margin-left: 0; margin-right: 0;
        }
        .avatar-upload-area {
            width: 100px;
            height: 100px;
            border: 2px dashed #ccc;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: 2rem;
            color: #ccc;
            margin-bottom: 10px;
        }
        .avatar-preview img {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 8px;
        }
    </style>
</head>
<body>

<div class="main-wrapper">
    <div class="sidebar">
        <h3>医院病例管理系统</h3>
        <ul>
<%--            <li><a href="/adminStatistics">统计分析</a></li>--%>
            <li><a href="/adminUserList">用户管理</a></li>
            <li><a href="/adminMedicalRecordList">病历管理</a></li>
            <li><a href="/adminPersonalCenter" class="active">个人信息管理</a></li>
            <li><a href="/adminMedicalTemplate">病历模板管理</a></li>
            <li><a href="/adminUpdateRequest">信息修改申请</a></li>
        </ul>
    </div>
    <div class="main-content">
        <div id="personalInfoSection" class="info-card">
            <h2>管理员个人信息</h2>
            <form id="personalInfoForm">

                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="avatar">头像</label>
                        <div>
                            <%-- Placeholder for avatar image or upload area --%>
                            <div id="avatarPreview" class="avatar-preview" style="display: none;">
                                <img src="" alt="Avatar">
                            </div>
                            <div id="avatarUpload" class="avatar-upload-area">
                                +
                            </div>
                            <small class="form-text text-muted">点击上传头像</small>
                        </div>
                    </div>
                    <div class="form-group col-md-6">
                        <input type="hidden" id="avatarPath">
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="username">账号</label>
                        <input type="text" class="form-control" id="username" readonly>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="nickname">昵称</label>
                        <input type="text" class="form-control" id="nickname" >
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="gender">性别</label>
                        <select class="form-control" id="gender">
                            <option value="0">男</option>
                            <option value="1">女</option>
                        </select>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="age">年龄</label>
                        <input type="text" class="form-control" id="age" >
                    </div>
                </div>


                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="phone">手机号码</label>
                        <input type="text" class="form-control" id="phone" >
                    </div>
                    <div class="form-group col-md-6">
                        <label for="email">邮箱</label>
                        <input type="text" class="form-control" id="email" >
                    </div>
                </div>

                <%-- The Modify button will likely redirect to the edit page --%>
                <button type="button" class="btn btn-secondary" id="modifyInfoButton" style="margin-top: 15px;">修改</button>
            </form>
        </div>

        <%-- Placeholder for other sections like Change Password --%>
        <%-- If admin personal center needs other sections, add them here --%>

    </div>
</div>

<script>
    $(function(){
        // 获取当前用户信息
        function loadUserInfo() {
            $.ajax({
                url: '/user/current',
                type: 'GET',
                success: function(res) {
                    if(res.code === 0 && res.data) {
                        $('#username').val(res.data.username);
                        $('#nickname').val(res.data.nickname);
                        $('#gender').val(res.data.gender);
                        $('#age').val(res.data.age || '');
                        $('#phone').val(res.data.phone || '');
                        $('#email').val(res.data.email || '');
                        $('#avatarPath').val(res.data.avatar || '');

                        // 处理头像
                        if(res.data.avatar) {
                            $('#avatarPreview img').attr('src', res.data.avatar);
                            $('#avatarPreview').show();
                            $('#avatarUpload').hide(); 
                            $('#avatarUpload').next('small').hide(); 
                        } else {
                            $('#avatarPreview').hide();
                            $('#avatarUpload').show(); 
                            $('#avatarUpload').next('small').show(); 
                        }
                    } else {
                        alert('获取用户信息失败');
                    }
                },
                error: function() {
                    alert('获取用户信息失败');
                }
            });
        }

        // 页面加载时获取用户信息
        loadUserInfo();

        // 处理修改按钮点击
        $('#modifyInfoButton').click(function() {
            var userData = {
                nickname: $('#nickname').val(),
                phone: $('#phone').val(),
                email: $('#email').val(),
                age: $('#age').val(),
                gender: $('#gender').val(),
                username: $('#username').val(),
                avatar: $('#avatarPath').val()
            };

            $.ajax({
                url: '/user/update',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(userData),
                success: function(res) {
                    if(res.code === 0) {
                        alert('个人信息更新成功');
                        loadUserInfo();
                    } else {
                        alert(res.message || '更新失败');
                    }
                },
                error: function() {
                    alert('更新失败，请稍后重试');
                }
            });
        });

        // 添加隐藏的文件输入框
        $('.form-group.col-md-6').has('label[for="avatar"]').append('<input type="file" id="avatarFileInput" accept="image/*" style="display: none;">');

        // 处理头像上传
        $('#avatarFileInput').on('change', function(e) {
            var file = e.target.files[0];
            if (file) {
                var formData = new FormData();
                formData.append('file', file);

                $.ajax({
                    url: '/user/upload/avatar',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(res) {
                        if(res.code === 0) {
                            $('#avatarPreview img').attr('src', res.data);
                            $('#avatarPreview').show();
                            $('#avatarPath').val(res.data);
                            // 当上传新头像后，隐藏上传区域和提示文本
                            $('#avatarUpload').hide(); 
                            $('#avatarUpload').next('small').hide();

                        } else {
                            alert(res.message || '头像上传失败');
                        }
                    },
                    error: function() {
                        alert('头像上传失败，请稍后重试');
                    }
                });
            }
        });

        // 触发文件选择
        $('#avatarUpload, #avatarPreview').click(function() {
             $('#avatarFileInput').click();
        });

        // 侧边栏激活状态处理
        $('.sidebar ul li a').removeClass('active');
        $('a[href="/adminPersonalCenter"]').addClass('active');

    });
</script>

</body>
</html> 